/* exported $dlgSearch */

var $dlgSearch = (function() {
  let html=`
  <div class="dlg-search">
  <div class="box">
    <div class="titlebar">
      <p class="title">查找</p>
      <span class="closebtn">✖</span>
    </div>
    <div class="main">
      <label for="">查找内容(N):</label>
      <input class="txt-content" type="text" autofocus><br>
      <input type="checkbox" value="capital" >区分大小写(C)<br>
      <input type="checkbox" value="round" >循环(R)
      <fieldset class="search-direction">
        <legend>方向</legend>
        <input type="radio" value="up" name="direction">向上(U)
        <input type="radio" value="down" name="direction" checked>向下(D)
      </fieldset>
      <input class="btn-search btn" type="button" value="查找下一个(F)"  disabled>
      <input class="btn-cancel btn" type="button" value="取消">
    </div>
  </div>
  </div>`;

  let $dlg=$(html);
  
  let $btnClose = $dlg.find('.closebtn'),
      $btnCancel = $dlg.find('.btn-cancel'),
      $btnSearch = $dlg.find('.btn-search'),
      $txtContent = $dlg.find('.txt-content'),
      $searchDirection=$dlg.find('search-direction'),
      $titleBar = $dlg.find('.titlebar');
  
  function closeDlg() { $dlg.remove(); }
  
  function verify() {
    if($txtContent.val() !== '') {
      $btnSearch.removeAttr('disabled');
    } else {
      $btnSearch.attr('disabled', 'disabled');
    }
  }
  
  function init() {
    $dlg.find('.box').draggable({handle: $titleBar});
    $txtContent.val('');
    $txtContent.focus();
    }
  
    function show(searchHandler) {
      $('body').append($dlg);
      init();
  
      $btnClose.click(closeDlg);
      $btnCancel.click(closeDlg);
      $txtContent.keyup(verify);
      $btnSearch.click(function() {
        searchHandler({
          content: $txtContent.val(),
          capitalSense: $dlg.find('input[value="capital"]:checked').val() === 'capital',
          round: $dlg.find('input[value="round"]:checked').val() === 'round',
          direction: $dlg.find('input[name="direction"]:checked').val()
        });
      });
    }
  
    return {show: show};
  })();